<template>
    <el-menu
      :default-active="'/index'"
      router
      mode="horizontal"
      background-color="white"
      text-color="#222"
      active-text-color="red"
      style="min-width: 1300px">
      <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
        {{ item.navItem }}
      </el-menu-item>
<span style="position: absolute;padding-top: 20px;right: 40%;font-size: 20px;font-weight: bold">什锦 --- 所见即是我，好与坏都接受</span>
      <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
               <i class="el-icon-s-custom" style="font-size: 45px;color: #222;padding-top: 8px ; margin-right:20px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item  @click.native="turnMy">个人中心</el-dropdown-item>
                <el-dropdown-item  @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-header>

    </el-menu>
</template>

<script>
  export default {
    name: 'NavMenu',
    data () {
      return {
        navList: [
          {name: '/index', navItem: '首页'},
          {name: '/question', navItem: '问答'},
          {name: '/blog', navItem: '博客'},
          {name: '/resource', navItem: '资源库'},
          {name:'/say',navItem:'公告'}
        ]
      }
    },
     methods: {
      logout(){
       var _this = this;
       this.$axios.get('/logout').then(resp => {
          if (resp.data.code === 200 || resp.data.success === true) {
            _this.$store.commit('logout')
            _this.$router.replace('/login')
          }
        })
      },
      turnMy(){
         this.$router.push("/admin");
      },
    }
  }
</script>

<style>
  a{
    text-decoration: none;
  }

  span {
    pointer-events: none;
  }
  .el-submenu>.el-submenu__title .el-submenu__icon-arrow{
	display: none;
  margin-left: 8px;
  margin-top: -3px;
  position: static;
  vertical-align: middle;
}
/*菜单展开*/
.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
	display: none;
  margin-left: 8px;
  margin-top: -3px;
  position: static;
  vertical-align: middle;
}

</style>

